<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>店铺列表</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
    <h1>店铺列表</h1>

    <!-- 店铺卡片 -->
    <div class="store-card">
        <div class="store-info">
            <span class="store-number">1.</span>
            <span class="store-name">店铺A</span>
        </div>
        <address>地址: 地址A</address>
        <div>类型: 餐饮</div>
        <div>描述: 这是一家非常好吃的餐馆。</div>
    </div>

    <div class="store-card">
        <div class="store-info">
            <span class="store-number">2.</span>
            <span class="store-name">店铺B</span>
        </div>
        <address>地址: 地址B</address>
        <div>类型: 服装</div>
        <div>描述: 这是一家时尚的服装店。</div>
    </div>

    <div class="store-card">
        <div class="store-info">
            <span class="store-number">3.</span>
            <span class="store-name">店铺C</span>
        </div>
        <address>地址: 地址C</address>
        <div>类型: 电子产品</div>
        <div>描述: 这里有最新的电子产品。</div>
    </div>

    <div class="store-card">
        <div class="store-info">
            <span class="store-number">4.</span>
            <span class="store-name">店铺D</span>
        </div>
        <address>地址: 地址D</address>
        <div>类型: 书店</div>
        <div>描述: 这是一家充满知识的书店。</div>
    </div>

    <div class="store-card">
        <div class="store-info">
            <span class="store-number">5.</span>
            <span class="store-name">店铺E</span>
        </div>
        <address>地址: 地址E</address>
        <div>类型: 杂货</div>
        <div>描述: 这是一家提供各种生活用品的杂货店。</div>
    </div>

    <!-- 分页 -->
    <div class="pagination">
        <a href="#" class="pagination-button">上一页</a>
        <a href="#" class="pagination-button active">1</a>
        <a href="#" class="pagination-button">2</a>
        <a href="#" class="pagination-button">3</a>
        <a href="#" class="pagination-button">4</a>
        <a href="#" class="pagination-button">5</a>
        <a href="#" class="pagination-button">下一页</a>
    </div>
</div>
</body>
</html>

<style>
    /* 全局样式 */
    body {
        font-family: 'Arial', sans-serif;
        background-color: #f5f5f5;
        color: #333;
        margin: 0;
        padding: 0;
    }

    .container {
        width: 85%;
        max-width: 1200px;
        margin: 50px auto;
        padding: 20px;
        background-color: #fff;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        border-radius: 8px;
    }

    h1 {
        text-align: center;
        color: #444;
        margin-bottom: 30px;
        font-size: 32px;
        font-weight: 500;
    }

    /* 店铺卡片样式 */
    .store-card {
        background-color: #fff;
        border: 1px solid #ddd;
        border-radius: 8px;
        padding: 20px;
        margin-bottom: 20px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
        transition: all 0.3s ease;
    }

    .store-card:hover {
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        transform: translateY(-2px);
    }

    .store-info {
        display: flex;
        align-items: center;
        margin-bottom: 10px;
    }

    .store-number {
        font-size: 24px;
        color: #999;
        margin-right: 10px;
    }

    .store-name {
        font-size: 24px;
        font-weight: 600;
        color: #333;
    }

    .store-card address {
        font-style: normal;
        color: #555;
        margin-bottom: 5px;
    }

    .store-card div {
        color: #666;
        margin-bottom: 5px;
    }

    /* 分页样式 */
    .pagination {
        text-align: center;
        margin-top: 30px;
    }

    .pagination-button {
        display: inline-block;
        padding: 8px 12px;
        margin: 0 5px;
        text-decoration: none;
        color: #333;
        background-color: #f5f5f5;
        border: 1px solid #ddd;
        border-radius: 4px;
        transition: all 0.3s ease;
    }

    .pagination-button.active {
        background-color: #007bff;
        color: #fff;
        border-color: #007bff;
    }

    .pagination-button:hover {
        background-color: #0056b3;
        border-color: #0056b3;
        color: #fff;
    }

    .pagination-button:first-child,
    .pagination-button:last-child {
        color: #999;
        background-color: #e9ecef;
        border-color: #e9ecef;
    }

    .pagination-button:first-child:hover,
    .pagination-button:last-child:hover {
        color: #fff;
        background-color: #6c757d;
        border-color: #6c757d;
    }
</style>